<!--
 * @Author: tansq
 * @Date: 2021-09-30 10:45:04
 * @LastEditTime: 2021-10-11 13:44:17
 * @LastEditors: tansq
 * @Description: 通用显示扩展属性
 * @FilePath: \hte-vue-dev\src\views\library\components\FileAttrNormal.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <j-form-container :disabled="formDisabled">
    <a-form-model  ref="ruleForm" :rules="rules" :model="form" slot="detail">
      <!-- 通用显示扩展属性 -->
      <a-row >
            <a-col v-for="(item, key) in classAttrList" :key="key" :span="handleCol(item)" >
      
      <a-form-model-item  
        class="attr-item"
       
        :label="item.name"
        v-bind="handleLayout(item)"
        :prop="item.name"
      >
      
         <a-textarea  v-model="form[item.name]" :auto-size="true" :maxLength="4000"/>
      </a-form-model-item>
              </a-col >
      </a-row>
    </a-form-model>
  </j-form-container>
</template>

<script>
import { getAction } from '@/api/manage'
import { formatDate } from '@/utils/util'
import debounce from 'lodash/debounce'
import { policylLevel,flagDics } from '@/views/library/dics'
export default {
  name: 'FileAttrNormal',
  components: {},
  props: {
    formDisabled: {
      type: Boolean,
      default: false
    },
    parentId: {
      type: String,
      default: null
    },
    classAttrList: {
      type: Array,
      default: () => {}
    },
    formItemLayout:{
      type:Object,
      default:() => {}
    },
    hteFile:{
      type:Object,
      default:() => {},
      required:false

    }
  },
  data() {
    
    return {
     
      dics: {
        policylLevel,
        flagDics
      },
      labelColRow: {
        xs: { span: 21 },
        sm: { span: 3 }
      },
      urls: {
        getTreeList: '/lib/hteFileClass/getTreeList',
        listAttr: '/lib/hteLibFile/attrs',
       
      },

      effectTimeShow: false,
      form: {},
      rules: {},
      specialList:[],
      businessList:[],
      businessPrefix:''
    }
  },
  watch: {
    classAttrList: {
      handler: function(value, oldValue) {
        
        this.initForm(value)
      },
      deep: true
    }
  },
  mounted () {
     this.initForm(this.classAttrList)
  },
  created() {},
  methods: {
    handleCol(item){
      return 24
    },
    handleLayout(item){
       return {labelCol: {
              xs: { span: 24 },
              md: { span: 4 },
            },

            wrapperCol: {
              xs: { span: 24 },
              md: { span: 18 },
            }}
    },
    formWatch(value) {},
    declareStatus() {
      
    },
    initForm(value) {
      
      let that = this
      this.businessPrefix = ''
      let fromData = {}
      this.$refs.ruleForm.clearValidate()
      debugger
      this.classAttrList.forEach(item => {

        that.$set(that.form, item.name , item.content)
        let rules = [{ required: true, message: '请输入' + item.name,trigger: 'change' }]

        if (item.required) {
          that.$set(that.rules,item.name,rules)
        }


       
      })
      
      that.form = Object.assign({}, that.form)
 
  
      
    },
    initDics(){
      
      
    },

    handleSelectSearchChange(value, option) {
      
 
     
    },
    onChange(e) {
      
    },

    onDeclareChange(e) {
      // this.declareStatus()
    },
       checkClassAttr() {
      let flag = false
      this.$refs.ruleForm.validate((err, values) => {
        if (err) {
          flag = true
        }
      })
      return flag
    },
    getClassAttr() {
      this.$refs.ruleForm.validate((err, values) => {
        if (err) {
              this.classAttrList.forEach(attr => {
            attr.content = this.form[attr.name]
        

          })
         
        }
      })
      return this.classAttrList
    }
  }
}
</script>
<style >
.attr-item .ant-form-item-label label{
    word-break: break-all;
    white-space: normal;

}
.attr-item textarea{
  line-height: 1.8
}
</style>
<style scoped>
.app-container {
  margin-top: 5px;
}
.attr-box {
  width: 100%;
  /* display: flex;
  align-content: flex-start;
  flex-flow: row wrap; */
}

.attr-item {
  /* width: 50%;
  margin-right: 0;
  margin-bottom: 20px; */
  
}

.attrTitle {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
.ant-form-item {
  margin-bottom: 5px !important;
}
.ant-input-number {
  width: 100%;
}
</style>